<template>
  <div class="menu-tree">
    <div v-if="menu.meta.isMenu">
      <a-sub-menu v-if="menu.children && menu.children.length >= 1" :key="menu.name">
        <template #title>
          <div class="menu-title flex">
            <span
              style="width: 18px; height: 18px; display: inline-block; background-size: cover"
              :style="{
                backgroundImage: 'url(' + menu.meta.icon + ')',
                backgroundSize: 'cover'
              }"
            >
            </span>
            <span>{{ menu.meta.title }}</span>
          </div>
        </template>
        <MenuTree v-for="item in menu.children" :key="item.name" :menu="item" />
      </a-sub-menu>
      <a-menu-item v-else :key="menu.name">
        <div class="menu-title flex">
          <span>{{ menu.meta.title }}</span>
        </div>
      </a-menu-item>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "MenuTree",
  props: {
    menu: {
      default: () => {
        return {
          meta: {
            title: "",
            icon: ""
          },
          path: "",
          name: "",
          children: [
            {
              path: "",
              name: ""
            }
          ]
        };
      }
    }
  }
});
</script>
<style lang="less" scoped>
.mr-5 {
  margin-right: 5px;
}
.menu-title {
  align-items: center;
  img {
    width: 20px;
    height: 20px;
  }
}
</style>
